<template>
  <view class="purchase-order">
    <!-- 收获地址 -->
    <view
      class="address boxShadow"
      v-if="shipAddress.hasOwnProperty('provinceName')"
    >
      <view class="detail-address" @click="chooseAddress">
        <view>
          {{ shipAddress.provinceName }}{{ shipAddress.cityName
          }}{{ shipAddress.countyName }}{{ shipAddress.detailInfo }}</view
        >
        <view class="iconfont icon-xiayige" style="color: #a0a09a"> </view>
      </view>
      <view class="user-info">
        {{ shipAddress.userName }}/{{ shipAddress.telNumber }}
      </view>
    </view>
    <!-- 没有收货地址 -->
    <view class="address boxShadow" v-else>
      <view class="detail-address" @click="chooseAddress">
        <view>暂无收货地址</view>
        <view class="qu-add">
          <view> 去添加 </view>
          <view class="iconfont icon-xiayige" style="color: #a0a09a"></view>
        </view>
      </view>
    </view>
    <view style="flex: 1; margin-bottom: 200rpx">
      <!-- 单规格 -->
      <view
        class="boxShadow one-kind"
        v-for="(item, index) in goodsList"
        :key="index"
      >
        <view class="more-kind-header">
          <image :src="item.info.pic" class="image" />

          <view class="more-kind-list">
            <view class="goods-name">
              <view>{{ item.info.title }}</view>
              <u-tag
                text="散装"
                v-if="item.info.package_type_id == 1 ? true : false"
                type="warning"
                shape="circle"
                size="mini"
                mode="dark"
              />
              <u-tag
                text="整装"
                v-if="item.info.package_type_id == 2 ? true : false"
                type="error"
                shape="circle"
                size="mini"
                mode="dark"
              />
            </view>
            <view class="goods-content">
              <view class="price-stock">
                <view>￥{{ item.info.cost / 100 }}</view>
                <view>库存：{{ item.info.storage }}</view>
              </view>

              <view class="buy-num">
                <view
                  class="iconfont icon-jian jian"
                  @click="reduceBuyCount(item, index)"
                ></view>
                <view class="num">{{ item.number }}</view>
                <view
                  class="iconfont icon-add-fill jia"
                  @click="addByCount(item, index)"
                ></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view
      class="u-skeleton-fillet boxShadow"
      style="position: fixed; bottom: 0"
    >
      <view
        class="limit"
        v-if="show_price_limit == true || show_num_limit == true"
      >
        <!-- 价格限值 -->
        <view v-if="show_price_limit == true">
          <view v-if="limitData.price_limit == true ? true : false">
            <span>满￥{{ limit.min_price / 100 }}元才能下单,您已满足</span>
            <span class="iconfont icon-gou1 icon"></span>
          </view>
          <view v-else>
            <span>满￥{{ limit.min_price / 100 }}元才能下单,您还差</span>
            <span class="price">￥{{ limitData.choose_price / 100 }}</span>
            <span>元</span>
          </view>
        </view>
        <!-- 件数限值 -->
        <view v-if="show_num_limit == true">
          <view v-if="limitData.num_limit == false">
            <span>整装满{{ limit.min_unit }}件免运费,您还差</span>
            <span class="price">{{ limitData.choose_num }}</span>
            <span>件</span>
            <!-- <span>(当前邮费:{{ limitData.freight / 100 }}元)</span> -->
          </view>
          <view v-else>
            <span>整装满{{ limit.min_unit }}件免运费,您已满足</span>
            <span class="iconfont icon-gou1 icon"></span>
          </view>
        </view>
      </view>
      <view class="car-bottom">
        <!-- <view>
          <view class="icon-qingkong iconfont"></view>
          <view>清空</view>
        </view> -->
        <view>
          <view class="price">￥{{ totalMoney }}</view>
          <view>
            <view> 共计{{ totalMount }}件 </view>
            <!-- 未满5件 -->
            <view v-if="show_num_limit == true" class="freight"
              >(含邮费:{{ limitData.freight / 100 }})</view
            >
          </view>
        </view>
        <view @click="$u.debounce(submit, 1000)">结算</view>
      </view>
    </view>

    <pay-detail ref="PayDetail" />
  </view>
</template>

<script>
import PayDetail from "./components/payDetail";
export default {
  components: {
    PayDetail,
  },
  data() {
    return {
      goodsList: [],
      totalMount: 0,
      totalMoney: 0,
      //进货限制
      // address: "人民南路"
      // id: 1
      // min_price: 100   //金额是针对 散装区的
      // min_unit: 2    //数量是针对 整装的
      // title: "中心仓库"
      limit: {
        min_price: null,
        min_unit: null,
      },
      limitData: {
        price_limit: false, //金额限值
        num_limit: false, //数量限值  整装
        //已购买金额
        choose_price: 0,
        //已选择 整件数量
        choose_num: 0,
        //当前邮费 未满要求件数
        freight: 0,
      },
      show_num_limit: false,
      show_price_limit: false,
      choose_num: 0,
      // 收获地址
      shipAddress: {
        // provinceName:'',
        // cityName:'',
        // countyName:'',
        // detailInfo:'',
        // userName:'',
        // postalCode:'',
        // telNumber:'',
        // nationalCode:''
      },
    };
  },
  watch: {
    goodsList: {
      handler(newV, oldV) {
        // 价格恢复
        this.totalMount = 0;
        this.totalMoney = 0;
        this.choose_num = 0;
        this.show_num_limit = false;
        this.show_price_limit = false;
        this.limitData.freight = 0;
        // 重新计算价格
        newV.map((v) => {
          this.totalMount += v.number;
          this.totalMoney += v.info.cost * v.number;
          // 整装  件数++
          if (v.package_type_id === 2) {
            this.choose_num += v.number;
            this.limitData.freight += v.number * v.freight;
          }
        });
        if (this.totalMoney >= this.limit.min_price) {
          this.limitData.price_limit = true;
        } else {
          //计算差多少钱
          this.limitData.choose_price = this.limit.min_price - this.totalMoney;
          this.limitData.price_limit = false;
        }

        //整件购买数量
        if (this.choose_num >= this.limit.min_unit) {
          this.limitData.num_limit = true;
          this.limitData.freight = 0;
        } else {
          //计算差多少件
          this.limitData.choose_num = this.limit.min_unit - this.choose_num;
          this.limitData.num_limit = false;
          //此时需要剪掉邮费
          this.limitData.choose_price =
            this.limitData.choose_price - this.limitData.freight;
        }
        if (this.totalMoney > 0) {
          // 展示 金额提示
          this.show_price_limit = true;
        }
        //展示 整装免邮费提示
        if (this.choose_num > 0) {
          this.show_num_limit = true;
        }
        //总金额
        this.totalMoney = (this.totalMoney + this.limitData.freight) / 100;
      },
      deep: true,
      // immediate: true,
    },
  },
  methods: {
    /**
     * 选择收货地址
     */
    chooseAddress() {
      var _this = this;
      uni.chooseAddress({
        success(res) {
          _this.shipAddress = res;
        },
      });
    },
    /**
     * 减少购买数量
     */
    reduceBuyCount(item, index) {
      var _this = this;
      if (0 >= _this.goodsList[index].number - item.info.min_number) {
        uni.showModal({
          title: "删除",
          content: "确定移除该商品？",
          success(res) {
            if (res.confirm) {
              _this.goodsList[index].number = 0;
              _this.$u.vuex("vuex_order_list", _this.goodsList);
              _this.goodsList.splice(index, 1);
            }
          },
        });
      } else {
        _this.goodsList[index].number -= item.info.min_number;
        _this.$u.vuex("vuex_order_list", _this.goodsList);
      }
    },

    /**
     * 增加购买数量
     */
    addByCount(item, index) {
      if (
        this.goodsList[index].number + item.info.min_number >
        item.info.storage
      ) {
        this.$u.toast("库存不足");
      } else {
        this.goodsList[index].number += item.info.min_number;
        this.$u.vuex("vuex_order_list", this.goodsList);
      }
    },
    /**
     * 提交订单
     */
    submit() {
      var _this = this;
      var from = {
        goods_list: this.goodsList,
        address:this.shipAddress.provinceName +this.shipAddress.cityName+this.shipAddress.countyName+this.shipAddress.detailInfo,
        linkman:this.shipAddress.userName,
        linktel:this.shipAddress.telNumber
      };
      //首先判断金额满足不
      if (this.limit.min_price > this.totalMoney * 100) {
        this.$u.toast("订单金额未满" + this.limit.min_price / 100);
        return;
      }
      // 判断地址
      if (!this.shipAddress.hasOwnProperty("userName")) {
        this.$u.toast("请先选择收货地址哦");
        return;
      }

      uni.showModal({
        title: "订单提交",
        content: "是否提交订单?",
        success(res) {
          if (res.confirm) {
            _this.$u.api.jinhuoApi(from).then((res) => {
              // 清除购物车
              _this.$u.vuex("vuex_order_list", []);
              _this.$refs.PayDetail.ordersn = res.ordersn;
              _this.$refs.PayDetail.totalMount = _this.totalMount;
              _this.$refs.PayDetail.totalMoney = _this.totalMoney;
              _this.$refs.PayDetail.show = true;
            });
          }
        },
      });
    },
    /**
     * 购买限制
     */
    buyLImit() {
      return new Promise((resolve) => {
        this.$u.api.warehouseInfoApi().then((res) => {
          this.limit = res;
          this.limitData.choose_price = this.limit.min_price;
          this.limitData.choose_num = this.limit.min_unit;
          resolve();
        });
      });
    },
  },
  onShow() {
    this.$refs.PayDetail.show = false;
  },
  onLoad(option) {
    this.buyLImit().then(() => {
      this.goodsList = this.vuex_order_list;
    });

    // 处理数据
    // 分类
    // var catalogList = [];
    // this.vuex_order_list.map((v) => {
    //   catalogList.push(v.goods_id);
    // });
    // catalogList = [...new Set(catalogList)];
  },
};
</script>

<style scoped lang ='scss' >
@mixin flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@mixin flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.freight {
  color: #999999;
  font-size: 24rpx;
}
.purchase-order {
  background-color: #f7f7f7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  .address {
    background-color: #fff;
    padding: 20rpx;
    margin: 20rpx;
    margin-bottom: 0;
    border-radius: 20rpx;
    .qu-add {
      @include flex-row;
      font-size: 30rpx;
      font-weight: normal;
    }
    .detail-address {
      @include flex-row;
      font-size: 35rpx;
      font-weight: bold;
      & > vie:nth-child(1) {
        flex: 1;
        color: #353330;
      }
      & > vie:nth-child(2) {
        width: 20rpx;
      }
      margin-bottom: 10rpx;
    }
    .user-info {
      font-size: 28rpx;
      color: #a0a09a;
    }
  }
  .kind {
    background-color: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    margin: 20rpx;
    .more-kind-header {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 20rpx;
      border-bottom: 1rpx solid #e6e6e6;
      .image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
        margin-right: 40rpx;
      }
      & > view {
        font-size: 30rpx;
        color: #333333;
        font-weight: bold;
      }
    }
    .more-kind-list {
      padding: 20rpx;
      border-bottom: 1rpx solid #e6e6e6;
      .goods-name {
        color: #333333;
        font-weight: bold;
        font-size: 30rpx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
      }
      .goods-content {
        @include flex-row;
        margin: 15rpx 0;
        .price-stock {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          flex: 1;
          & > view:nth-child(1) {
            color: #d65c45;
            font-size: 32rpx;
            margin-right: 20rpx;
            font-weight: Bold;
          }
          & > view:nth-child(2) {
            color: #999999;
            font-size: 24rpx;
          }
        }
        .buy-num {
          width: 160rpx;
          @include flex-row;
          .jian {
            color: #dcdcdc;
            font-size: 48rpx;
            margin-right: 10rpx;
          }
          .jia {
            color: #d65c45;
            font-size: 50rpx;
            margin-left: 10rpx;
          }
          .num {
            color: #333333;
            font-size: 28rpx;
            font-weight: bold;
          }
        }
      }
    }
  }

  .one-kind {
    background-color: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 10rpx;
    margin: 20rpx;
    .more-kind-header {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 20rpx;
      /* border-bottom: 1rpx solid #e6e6e6; */
      .image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
        margin-right: 40rpx;
      }
      .more-kind-list {
        flex: 1;
        padding: 20rpx 0;
        .goods-name {
          color: #333333;
          font-weight: bold;
          font-size: 30rpx;
        }
        .goods-content {
          @include flex-row;
          margin: 15rpx 0;
          .price-stock {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            flex: 1;
            & > view:nth-child(1) {
              color: #d65c45;
              font-size: 32rpx;
              margin-right: 20rpx;
              font-weight: Bold;
            }
            & > view:nth-child(2) {
              color: #999999;
              font-size: 24rpx;
            }
          }

          .buy-num {
            width: 160rpx;
            @include flex-row;
            .jian {
              color: #dcdcdc;
              font-size: 48rpx;
              margin-right: 10rpx;
            }
            .jia {
              color: #d65c45;
              font-size: 50rpx;
              margin-left: 10rpx;
            }
            .num {
              color: #333333;
              font-size: 28rpx;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
  .limit {
    padding: 20rpx 0;
    text-align: center;
    color: #999999;
    background-color: #ffffff;
    & > view {
      padding: 2rpx 0;
      .price {
        color: red;
      }
      .icon {
        color: #18b566;
        margin-left: 10rpx;
      }
    }
  }
  .car-bottom {
    @include flex-row;
    height: 98rpx;
    width: 100vw;
    background-color: #ffffff;
    border-top: 1rpx solid #e6e6e6;
    /* & > view:nth-child(1) {
      margin-left: 40rpx;
      @include flex-row;
      width: 100rpx;
      color: #333333;
      font-size: 28rpx;
      .circle {
        width: 32rpx;
        height: 32rpx;
        line-height: 32rpx;
        text-align: center;
        border-radius: 50%;
        border: 1rpx solid #cccccc;
        & > image {
          width: 100%;
          height: 100%;
        }
      }
    } */
    & > view:nth-child(1) {
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-left: 50rpx;
      .price {
        color: #d65c45;
        font-size: 32rpx;
        font-weight: blod;
        margin-right: 20rpx;
      }
      .num {
        font-size: 24rpx;
        color: #333333;
      }
    }
    & > view:nth-child(2) {
      background-color: #d65c45;
      width: 240rpx;
      height: 100%;
      text-align: center;
      line-height: 100rpx;
      color: #ffffff;
      font-weight: bold;
      font-size: 28rpx;
      margin-left: 20rpx;
    }
  }
}
</style>
